<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>GCDDYD</title>
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju/dt-1.12.1/datatables.min.css" />
		<style>
			html,
			body,
			#page-m,
			#container {
				width: 100%;
				height: 100%;
				min-height: 900px;
			}

			#page-m {
				display: flex;
				flex-direction: column;
			}

			#header,
			#footer {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			
			#header{
				height: 50px;
				background-image: repeating-linear-gradient(135deg, rgba(189, 189, 189, 0.1) 0px, rgba(189, 189, 189, 0.1) 2px, transparent 2px, transparent 4px), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
			}
			
			#footer{
				color: #fff;
				height: 250px;
				background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.3) 0px, rgba(0,0,0,0.3) 16px,transparent 16px, transparent 32px,rgba(0,0,0,0.08) 32px, rgba(0,0,0,0.08) 48px,rgba(0,0,0,0.14) 48px, rgba(0,0,0,0.14) 64px,rgba(0,0,0,0.05) 64px, rgba(0,0,0,0.05) 80px,transparent 80px, transparent 96px,rgba(0,0,0,0.21) 96px, rgba(0,0,0,0.21) 112px,rgba(0,0,0,0.18) 112px, rgba(0,0,0,0.18) 128px,rgba(0,0,0,0.21) 128px, rgba(0,0,0,0.21) 144px,rgba(0,0,0,0.29) 144px, rgba(0,0,0,0.29) 160px,rgba(0,0,0,0.08) 160px, rgba(0,0,0,0.08) 176px,rgba(0,0,0,0.3) 176px, rgba(0,0,0,0.3) 192px,rgba(0,0,0,0.23) 192px, rgba(0,0,0,0.23) 208px),repeating-linear-gradient(135deg, transparent 0px, transparent 3px,rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 6px,rgba(0,0,0,0.03) 6px, rgba(0,0,0,0.03) 9px,rgba(0,0,0,0.09) 9px, rgba(0,0,0,0.09) 12px,rgba(0,0,0,0.08) 12px, rgba(0,0,0,0.08) 15px,rgba(0,0,0,0.1) 15px, rgba(0,0,0,0.1) 18px,rgba(0,0,0,0.1) 18px, rgba(0,0,0,0.1) 21px,rgba(0,0,0,0.04) 21px, rgba(0,0,0,0.04) 24px,transparent 24px, transparent 27px,rgba(0,0,0,0.03) 27px, rgba(0,0,0,0.03) 30px,rgba(0,0,0,0.03) 30px, rgba(0,0,0,0.03) 33px,rgba(0,0,0,0.01) 33px, rgba(0,0,0,0.01) 36px,rgba(0,0,0,0.1) 36px, rgba(0,0,0,0.1) 39px,rgba(0,0,0,0.06) 39px, rgba(0,0,0,0.06) 42px,transparent 42px, transparent 45px,rgba(0,0,0,0.03) 45px, rgba(0,0,0,0.03) 48px,rgba(0,0,0,0.05) 48px, rgba(0,0,0,0.05) 51px,rgba(0,0,0,0.03) 51px, rgba(0,0,0,0.03) 54px),repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 14px,transparent 14px, transparent 28px,rgba(0,0,0,0.3) 28px, rgba(0,0,0,0.3) 42px,rgba(0,0,0,0.25) 42px, rgba(0,0,0,0.25) 56px,rgba(0,0,0,0.07) 56px, rgba(0,0,0,0.07) 70px,rgba(0,0,0,0.23) 70px, rgba(0,0,0,0.23) 84px,rgba(0,0,0,0.02) 84px, rgba(0,0,0,0.02) 98px,rgba(0,0,0,0.04) 98px, rgba(0,0,0,0.04) 112px,rgba(0,0,0,0.07) 112px, rgba(0,0,0,0.07) 126px,rgba(0,0,0,0.21) 126px, rgba(0,0,0,0.21) 140px,rgba(0,0,0,0.15) 140px, rgba(0,0,0,0.15) 154px,transparent 154px, transparent 168px,rgba(0,0,0,0.12) 168px, rgba(0,0,0,0.12) 182px,rgba(0,0,0,0.13) 182px, rgba(0,0,0,0.13) 196px,rgba(0,0,0,0.27) 196px, rgba(0,0,0,0.27) 210px),repeating-linear-gradient(0deg, rgba(0,0,0,0.17) 0px, rgba(0,0,0,0.17) 14px,rgba(0,0,0,0.26) 14px, rgba(0,0,0,0.26) 28px,rgba(0,0,0,0.06) 28px, rgba(0,0,0,0.06) 42px,rgba(0,0,0,0.14) 42px, rgba(0,0,0,0.14) 56px,transparent 56px, transparent 70px,rgba(0,0,0,0.22) 70px, rgba(0,0,0,0.22) 84px,rgba(0,0,0,0.1) 84px, rgba(0,0,0,0.1) 98px,transparent 98px, transparent 112px,rgba(0,0,0,0.15) 112px, rgba(0,0,0,0.15) 126px,transparent 126px, transparent 140px,rgba(0,0,0,0.03) 140px, rgba(0,0,0,0.03) 154px,rgba(0,0,0,0.03) 154px, rgba(0,0,0,0.03) 168px,rgba(0,0,0,0.06) 168px, rgba(0,0,0,0.06) 182px,rgba(0,0,0,0.17) 182px, rgba(0,0,0,0.17) 196px,rgba(0,0,0,0.2) 196px, rgba(0,0,0,0.2) 210px),linear-gradient(135deg, rgb(252, 16, 76),rgb(244, 3, 176));
			}

			#body {
				width: 100%;
				min-height: 200px;
				flex-grow: 2;
				display: flex;
				flex-direction: row;
			}

			#body-left,
			#body-right {
				width: 100%;
				/* min-height: 200px; */
			}

			#body-right {
				width: 0%;
				display: none;
			}

			#body-left {
				color: #fff;
				background-image: radial-gradient(circle at center center, rgba(33, 33, 33, 0), rgb(51, 81, 81)), repeating-linear-gradient(135deg, rgb(51, 81, 81) 0px, rgb(51, 81, 81) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(45deg, rgb(56, 56, 56) 0px, rgb(56, 56, 56) 5px, transparent 5px, transparent 6px), linear-gradient(90deg, rgb(51, 81, 81), rgb(51, 81, 81));
			}

			#process-over {
				display: none;
			}

			#panel {
				position: fixed;
				background-color: white;
				max-height: 90%;
				overflow-y: auto;
				top: 10px;
				right: 10px;
				width: 280px;
			}

			#panel .amap-call {
				background-color: #009cf9;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}

			#panel .amap-lib-transfer {
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="page-m">
			<div id="header">
				<h1>公交路线收集器</h1>
				<h1>GCDDYD</h1>
			</div>
			<div id="body">
				<div id="body-left">
					<h2 id="colleague">员工数：</h2>
					<h2 id="process">正在加载中，当前进度:</h2>
					<h2 id="process-over">全部加载完成</h2>
					<table id="table-gc" class="display"></table>
				</div>

				<div id="body-right">
					<div id="container"></div>
					<div id="panel"></div>
				</div>
			</div>
			<div id="footer">
				<table id="table-ddyd" class="display"></table>
			</div>
		</div>

		<script src="https://code.jquery.com/jquery-2.2.4.min.js"
			integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>


		<script type="text/javascript" src="https://cdn.datatables.net/v/ju/dt-1.12.1/datatables.min.js"></script>
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: '65665d1ae8f71228bf81744f50ea6702',
			}
		</script>
		<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
		<script
			src="https://webapi.amap.com/maps?v=2.0&key=66596e4d8d25eaff1bd87e9d80ca5c32&plugin=AMap.Geocoder,AMap.Transfer">
		</script>
		<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
		<script>
			// 员工地址列表
			let orgListColleagueAddress = [
				'上海市宝山区罗店镇罗东路306弄',
				'上海市宝山区一二八纪念路933弄',
				'上海市宝山区真朋路68弄',
				'上海市宝山区吴淞海滨二村3号502'
			];

			// 目的地地址列表
			let orgListDestAddress = [
				'田林路 889号, 科技绿洲五期17号楼, 闵行区',
				'万源路599号, 万源城开中心T1 , 闵行区',
				'上海市长宁区天山西路541号，光大安石虹桥中心T6',
				'上海市曹杨路 1518号, 高尚领域3号楼'
			];

			let appView = {
				$colleague: $('#colleague'),
				$process: $('#process'),
				$processOver: $('#process-over'),
			}

			let Colleague = function(addr) {
				this.addr = addr;
				this.dest1 = null;
				this.dest2 = null;
				this.dest3 = null;
				this.dest4 = null;

				this.initDest = function() {
					let ins = this;
					getTransfer(this.addr, orgListDestAddress[0], function(dest) {
						// console.log(`initDest1,dest= ${dest}`);
						// console.log(dest);
						ins.dest1 = dest.plans[0];
						ins.checkAll();
					});
					getTransfer(this.addr, orgListDestAddress[1], function(dest) {
						// console.log(`initDest1,dest= ${dest}`);
						// console.log(dest);
						ins.dest2 = dest.plans[0];
						ins.checkAll();
					});
					getTransfer(this.addr, orgListDestAddress[2], function(dest) {
						// console.log(`initDest1,dest= ${dest}`);
						// console.log(dest);
						ins.dest3 = dest.plans[0];
						ins.checkAll();
					});
					getTransfer(this.addr, orgListDestAddress[3], function(dest) {
						// console.log(`initDest1,dest= ${dest}`);
						// console.log(dest);
						ins.dest4 = dest.plans[0];
						ins.checkAll();
					});
				}

				this.checkAll = function() {
					if (!!this.dest1 && !!this.dest2 && !!this.dest3 && !!this.dest4) {
						addColleagueCount();
					}
				}
			}


			appView.$colleague.text(`员工数：${orgListColleagueAddress.length}`);

			let processGoon = function(count) {
				appView.$process.text(`当前进度: ${count}/${orgListColleagueAddress.length}`);
			}

			let processOver = function() {
				appView.$processOver.css('display', 'block');
			}

			let colleagueCount = 0;
			let addColleagueCount = function() {
				colleagueCount++;
				setTimeout(processGoon(colleagueCount),10);
				
				

				if (colleagueCount == orgListColleagueAddress.length) {
					processOver();
					generateColleagueData();
				}
			}


			let Colleagues = [];

			let map = new AMap.Map('container', {
				resizeEnable: true,
				center: [116.397428, 39.90923],
				zoom: 13
			});

			let transOptions = {
				map: map,
				city: '上海市',
				// panel: 'panel',
				policy: AMap.TransferPolicy.LEAST_TIME
			};
			//构造公交换乘类
			let transfer = new AMap.Transfer(transOptions);

			let geocoder = new AMap.Geocoder({
				city: "021", //城市设为北京，默认：“全国”
			});


			let getTransfer = function(p1, p2, cb) {
				console.log(`getTransfer,p1=${p1},p2=${p2}`);
				if (!p1 || !p2) {
					console.log(`getTransfer,p1 or p2 is empty, quit`);
					return;
				}

				transfer.search([{
						keyword: p1,
					},
					//第一个元素city缺省时取transOptions的city属性
					{
						keyword: p2,
					}
					//第二个元素city缺省时取transOptions的cityd属性
				], function(status, result) {
					// result即是对应的公交路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferResult
					if (status === 'complete') {
						if (cb != null) {
							cb(result);
						}
						log.success('绘制公交路线完成')
					} else {
						log.error('公交路线数据查询失败' + result)
					}
				});
			}

			let initColleague = function() {
				for (let i = 0; i < orgListColleagueAddress.length; i++) {
					let c = new Colleague(orgListColleagueAddress[i]);
					c.initDest();

					Colleagues.push(c);
				}
			}

			let testColleagues = function() {
				console.log(Colleagues);
			}

			let generateAvg = function(data) {
				let ret = [];
				for (let i = 0; i < data.length; i++) {
					if (i == 0) {
						ret = data[i];
						ret[0] = '汇总信息'
					} else {
						for (j = 1; j < ret.length; j++) {
							ret[j] += data[i][j]
						}
					}
				}

				let count = Colleagues.length;
				console.log('sum complete');
				console.log(ret);
				for (j = 1; j < ret.length; j++) {
					ret[j] = Math.round(ret[j] / count * 100) / 100;
				}
				console.log('after average')
				console.log(ret);

				$('#table-ddyd').DataTable({
					data: [ret],
					columns: [{
							title: '统计结果'
						},
						{
							title: orgListDestAddress[0].split(',')[0] + '平均距离'
						},
						{
							title: '平均耗时'
						},
						{
							title: orgListDestAddress[1].split(',')[0] + '平均距离'
						},
						{
							title: '平均耗时'
						},
						{
							title: orgListDestAddress[2].split(',')[0] + '平均距离'
						},
						{
							title: '平均耗时'
						},
						{
							title: orgListDestAddress[3].split(',')[0] + '平均距离'
						},
						{
							title: '平均耗时'
						},
					],
				});
			}

			let generateColleagueData = function() {
				let arr = [];
				for (let i = 0; i < Colleagues.length; i++) {
					let a = [];
					let c = Colleagues[i];
					a.push(c.addr);
					a.push(c.dest1.time);
					a.push(c.dest1.distance);
					a.push(c.dest2.time);
					a.push(c.dest2.distance);
					a.push(c.dest3.time);
					a.push(c.dest3.distance);
					a.push(c.dest4.time);
					a.push(c.dest4.distance);

					arr.push(a);
				}

				$('#table-gc').DataTable({
					data: arr,
					columns: [{
							title: '员工地址'
						},
						{
							title: orgListDestAddress[0].split(',')[0] + '距离'
						},
						{
							title: '耗时'
						},
						{
							title: orgListDestAddress[1].split(',')[0] + '距离'
						},
						{
							title: '耗时'
						},
						{
							title: orgListDestAddress[2].split(',')[0] + '距离'
						},
						{
							title: '耗时'
						},
						{
							title: orgListDestAddress[3].split(',')[0] + '距离'
						},
						{
							title: '耗时'
						},
					],
				});

				generateAvg(arr);
			}

			initColleague();
		</script>
	</body>
</html>
